* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 3840px;
	height: 800px;
	background: url(../img/背景.png) no-repeat;
	background-size: 100% 100%;
	font-family: "SourceHanSansCN-Regular";
	letter-spacing: 2px;
	color: white;
}
canvas{
	z-index: 10;
}
#bgFlash{
	position: absolute;
left: 0;
top: 0;
width: 3840px;
height: 800px;
}
#bg .bg{
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
}
#xian img{
	position: absolute;
	z-index: 0;
}

.left-box {
	width: 975px;
	height: 800px;
	z-index: 10;
}

.left-box .bt {
	width: 145px;
	height: 40px;
	background: url(../img/bt-bg.png) no-repeat;
	background-position: center center;
	color: white;
	text-indent: 40px;
	font-size: 21px;
	font-family: "微软雅黑";
	font-weight: bold;
}

.left-box .left-n1 {
	position: absolute;
	top: 80px;
	left: 265px;
	width: 416px;
	height: 419px;
}

.left-box .left-n1 .tab-head {
	display: flex;
	justify-content: flex-end;
	margin-right: 10px;
	font-size: 16px;
}

.left-box .left-n1 .tab-head .tab-head-n1 {
	text-align: center;
	width: 90px;
	height: 30px;
}

.left-box .left-n1 .tab-head .tab-head-n2 {
	text-align: center;
	width: 75px;
	height: 30px;
}

.left-box .left-n1 .tab-body {
	display: flex;
	justify-content: flex-end;
	margin-right: 10px;
	font-size: 16px;
	height: 56px;
	margin-bottom: 10px;
}

.left-box .left-n1 .tab-body .tab-body-n0 {
	text-align: center;
	width: 55px;
	margin-right: 21px;
	font-size: 13px;
	padding-top: 17px;
	letter-spacing: 1px;
	font-family: 'DIN-Medium';
}
.left-box .left-n1 .tab-body .tab-body-n1 {
	text-align: center;
	width: 90px;
	height: 30px;
	line-height: 56px;
	color: #00f6ff;
	font-family: 'DIN-Medium';
}

.left-box .left-n1 .tab-body .tab-body-n2 {
	text-align: center;
	width: 75px;
	height: 30px;
	line-height: 56px;
	color: #00f6ff;
	font-family: 'DIN-Medium';
}

.left-box .left-n1 .tab-body .tab-body-n3 {
	text-align: center;
	width: 75px;
	height: 30px;
	line-height: 56px;
	color: #00ff66;
	font-family: 'DIN-Medium';
}

.left-box .left-n2 {
	position: relative;
	top: 80px;
	left: 450px;
	width: 466px;
	height: 419px;
}

.left-box .left-n3 {
	position: absolute;
	top: 498px;
	left: 265px;
	width: 920px;
	height: 270px;
}

.left-box .left-n3 img {
	position: absolute;
	z-index: 0;
	width: 838px;
	height: 170px;
	left: 55px;
	top: 70px;
	opacity: 0.7;
}

.left-box .left-n3 .hw-left {
	position: absolute;
	text-align: right;
	line-height: 43px;
	left: 25px;
	top: 50px;
	color: rgba(104, 179, 255, 0.5);
	font-family: 'DIN-Medium';
}

.left-box .left-n3 p {
	position: absolute;
	left: 830px;
	top: 30px;
	color: #68b3ff;
}

.center-box {
	width: 1420px;
	height: 800px;
	z-index: 10;
}

.center-box .bt {
	position: absolute;
	top: 115px;
	left: 1260px;
	color: white;
	width: 220px;
	height: 40px;
	font-size: 28px;
}

.center-box .bt1 {
	position: absolute;
	top: 115px;
	left: 1530px;
	color: #dff3ff;
	width: 270px;
	height: 40px;
	font-size: 22px;
}

.center-box .bt img {
	float: right;
}

.center-box .box {
	position: absolute;
	top: 300px;
	left: 1260px;
	color: rgba(255, 255, 255, 0.5);
	width: 340px;
	height: 180px;
	font-size: 20px;
	display: flex;
	flex-wrap: wrap;
}

.center-box .box p {
	font-size: 32px;
	margin-top: 5px;
	font-family: 'DIN-Medium';
}

.center-box .box .p1 {
	width: 125px;
	height: 90px;
}

.center-box .box .p2 {
	width: 130px;
	height: 90px;
	font-size: 18px;
}

.center-box .box .p3 {
	width: 80px;
	height: 90px;
	font-size: 18px;
}

.center-box .box .p4 {
	width: 125px;
	height: 90px;
}

.center-box .box .p5 {
	width: 190px;
	height: 90px;
}

.center-box .box .p5 a {
	font-size: 14px;
}

.center-box .box .p1 p {
	color: #fffc00;
}

.center-box .box .p2 p {
	color: #c3fa7a;
}

.center-box .box .p3 p {
	color: #feae45;
}

.center-box .box .p4 p {
	color: #a8faff;
}

.center-box .box .p5 p {
	color: #29f95a;
}

.center-box .img {
	position: absolute;
	top: 435px;
	left: 2150px;
}

.center-box img {
	margin: 0 auto;
	display: block;
}

.center-box .list-n1 {
	position: absolute;
	text-align: center;
	top: 565px;
	width: 130px;
	height: 210px;
	margin-left: 25px;
	color: white;
}

.center-box .list-n2 {
	position: absolute;
	left: 2300px;
	top: 100px;
	width: 300px;
	height: 125px;
}

.center-box .list-n2 p {
	text-align: center;
	width: 150px;
	float: left;
	color: white;
	font-size: 20px;
}

.center-box .list-n2 b {
	display: block;
	margin-top: 5px;
	font-size: 28px;
	background: linear-gradient(#82c5f2, #1d91f6);
	-webkit-background-clip: text;
	color: transparent;
	font-family: 'DIN-Medium';
	font-weight: normal;
}

.center-box .list-n2 a {
	font-size: 16px;
	font-family: "SourceHanSansCN-Regular";
}

.center-box .jindu {
	position: absolute;
	top: 600px;
	left: 1400px;
	width: 1150px;
	height: 180px;
}

.center-box .jindu p {
	position: absolute;
	font-size: 20px;
	color: white;
}

.center-box .jindu .n_1 {
	height: 100%;
}

.center-box .jindu .num {
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
}

.center-box .jindu .num a {
	width: 100%;
	font-size: 36px;
	padding-top: 25px;
	text-align: center;
	background: linear-gradient(#82c5f2, #1d91f6);
	-webkit-background-clip: text;
	color: transparent;
	font-family: 'DIN-Medium';
}

.right-box {
	width: 975px;
	height: 800px;
	z-index: 10;
}

.right-box .bt {
	position: absolute;
	width: 145px;
	height: 40px;
	background: url(../img/bt-bg.png) no-repeat;
	background-position: center center;
	color: white;
	text-indent: 40px;
	font-size: 21px;
	font-weight: bold;
	font-family: "微软雅黑";
}

.right-box .bt1 {
	position: absolute;
	width: 195px;
	height: 40px;
	background: url(../img/bt1-bg.png) no-repeat;
	background-position: center center;
	color: white;
	text-indent: 45px;
	font-size: 21px;
	font-weight: bold;
	font-family: "微软雅黑"';
}

.right-box .right-n1 {
	position: absolute;
	top: 70px;
	left: 2675px;
	width: 960px;
	height: 145px;
	display: flex;
	flex-flow: wrap;
}

.right-box .right-n1 div {
	width: 240px;
	height: 64px;
}

.right-box .right-n1 img {
	float: left;
}

.right-box .right-n1 a {
	font-size: 25px;
	background: linear-gradient(#82c5f2, #1d91f6);
	-webkit-background-clip: text;
	color: transparent;
	font-family: 'DIN-Medium';
}

.right-box .right-n1 p {
	font-size: 16px;
	width: 161px;
	margin-left: 80px;
	margin-top: 5px;
}

.right-box .right-n2 {
	position: absolute;
	top: 214px;
	left: 2675px;
	width: 450px;
	height: 285px;
}

.right-box .right-n2 img {
	position: absolute;
	width: 400px;
	height: 220px;
	z-index: 0;
	top: 48px;
	left: 15px;
}
.right-box .right-n2 .box{
	position: absolute;
	width: 390px;
	left: 20px;
	top: 92px;
}
.right-box .right-n2 .tab-body {
	display: flex;
	justify-content: center;
	font-size: 16px;
	height: 30px;
	line-height: 30px;
	margin-bottom: 5px;
}
.right-box .right-n2 .tab-body .tab-body-n1 {
	text-align: center;
	width: 60px;
	padding-left: 20px;
	font-size: 13px;
	letter-spacing: 1px;
	font-family: 'DIN-Medium';
}
.right-box .right-n2 .tab-body .tab-body-n2 {
	text-align: center;
	width: 165px;
	padding-left: 15px;
	font-size: 13px;
	letter-spacing: 1px;
}
.right-box .right-n2 .tab-body .tab-body-n3 {
	text-align: center;
	width: 120px;
	padding-left: 10px;
	font-size: 13px;
	letter-spacing: 1px;
	font-family: 'DIN-Medium';
}
.right-box .right-n3 {
	position: absolute;
	top: 214px;
	left: 3125px;
	width: 450px;
	height: 285px;
}

.right-box .right-n3 img {
	position: absolute;
	width: 400px;
	height: 220px;
	z-index: 0;
	top: 48px;
	left: 30px;
}
.right-box .right-n3 .box{
	position: absolute;
	width: 390px;
	left: 35px;
	top: 92px;
}
.right-box .right-n3 .tab-body {
	display: flex;
	justify-content: center;
	font-size: 16px;
	height: 30px;
	line-height: 30px;
	margin-bottom: 5px;
}
.right-box .right-n3 .tab-body .tab-body-n1 {
	text-align: center;
	width: 60px;
	padding-left: 20px;
	font-size: 13px;
	letter-spacing: 1px;
	font-family: 'DIN-Medium';
}
.right-box .right-n3 .tab-body .tab-body-n2 {
	text-align: center;
	width: 140px;
	padding-left: 40px;
	font-size: 13px;
	letter-spacing: 1px;
}
.right-box .right-n3 .tab-body .tab-body-n3 {
	text-align: center;
	width: 90px;
	padding-left: 40px;
	font-size: 13px;
	letter-spacing: 1px;
	font-family: 'DIN-Medium';
}
.right-box .right-n4 {
	position: absolute;
	top: 498px;
	left: 2675px;
	width: 920px;
	height: 270px;
}

.right-box .right-n4 img {
	position: absolute;
	z-index: 0;
	width: 840px;
	height: 170px;
	left: 55px;
	top: 66px;
	opacity: 0.7;
}

.right-box .right-n4 .qs-left {
	position: absolute;
	text-align: right;
	line-height: 25px;
	left: 10px;
	top: 82px;
	color: rgba(104, 179, 255, 0.5);
	font-family: 'DIN-Medium';
}

.right-box .right-n4 p {
	position: absolute;
	left: 820px;
	top: 30px;
	color: #68b3ff;
}

/*圆形扩散*/
/*@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}*/

@keyframes warn1 {
0% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
opacity: 0.0;
}

/*25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}*/

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

/*75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}*/

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: absolute;
width: 120px;
height: 120px;
}
.dian1{
left: 2100px;
top: 255px;
}
.dian2{
left: 1950px;
top: 305px;
}
.dian3{
left: 1880px;
top: 385px;
}
.dian4{
left: 2050px;
top: 385px;
}
.dian5{
left: 1900px;
top: 485px;
}
.dian6{
left: 1750px;
top: 425px;
}
/* 保持大小不变的小圆点 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 0;
top: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #baf5fe;
border-radius: 50%; 
background-color:#baf5fe; /* 实心圆 ，如果没有这个就是一个小圆圈 */
z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈 第一个圆 */
.pulse {
position: absolute;
width: 40px;
height: 40px;
left: -25px;
top: -25px;
border: 10px solid #99dbf7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 3s ease-out;
-moz-animation: warn1 3s ease-out;
animation: warn1 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #99dbf7; /* 阴影效果 */
}
/* 产生动画（向外扩散变大）的圆圈 第二个圆 */
.pulse1 {
position: absolute;
width: 100px;
height: 100px;
left: -55px;
top: -55px;
border: 10px solid #99dbf7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 3s ease-out;
-moz-animation: warn1 3s ease-out;
animation: warn1 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #99dbf7; /* 阴影效果 */
}
/* 产生动画（向外扩散变大）的圆圈 第三个圆 */
.pulse2 {
position: absolute;
width: 160px;
height: 160px;
left: -85px;
top: -85px;
border: 10px solid #99dbf7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 3s ease-out;
-moz-animation: warn1 3s ease-out;
animation: warn1 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #99dbf7; /* 阴影效果 */
}
/* 产生动画（向外扩散变大）的圆圈 第四个圆 */
.pulse3 {
position: absolute;
width: 235px;
height: 235px;
left: -119px;
top: -119px;
border: 5px solid #99dbf7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 3s ease-out;
-moz-animation: warn1 3s ease-out;
animation: warn1 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #99dbf7; /* 阴影效果 */
}
/* 产生动画（向外扩散变大）的圆圈 第五个圆 */
.pulse4 {
position: absolute;
width: 300px;
height: 300px;
left: -147.5px;
top: -147.5px;
border: 1px solid #99dbf7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 3s ease-out;
-moz-animation: warn1 3s ease-out;
animation: warn1 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #99dbf7; /* 阴影效果 */
}
/* 产生动画（向外扩散变大）的圆圈 第六个圆 */
.pulse5 {
position: absolute;
width: 400px;
height: 400px;
left: -197.5px;
top: -197.5px;
border: 1px solid #99dbf7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 3s ease-out;
-moz-animation: warn1 3s ease-out;
animation: warn1 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #99dbf7; /* 阴影效果 */
}